<template>
  <div class="login-container">
    <h1 class="login-text">{{ $t('m.loginTitle') }}</h1>

    <div class="tel-box">
      <vue-phone-number-input v-model="phoneNumber" :countries-height="36" :placeholder="true"
        :default-country-code="'CN'" :border-radius="6" :show-code-on-list="true" :clearable="true" :translations="{
          countrySelectorLabel: '国家代码',
          countrySelectorError: 'Choisir un pays',
          phoneNumberLabel: exampleText,
          example: '示例 :'
        }" @update="results = $event" :no-example="false" :error="isError" />
    </div>

    <div class="pw-box">
      <div class="pw-input" v-if="logMode">
        <input id="pw-input" :type="pwShowState" v-model="password" maxlength="6" :placeholder="$t('m.PWinputInfo')"
          onkeyup="value=value.replace(/\s+/g,'')" />
        <div :class="eyesClassName" @click="showPW"></div>
      </div>

      <div class="sms-input" v-else>
        <input id="sms-input" v-model="smsCode" type="Number" :placeholder="$t('m.OTPinputInfo')" maxlength="6"
          oninput="if(value.length>6)value=value.slice(0,6)" />
        <a href="javascript:;" @click="sendOTP">{{ sendState ? $t('m.sendOTP') : sendOTPText }}</a>
      </div>
    </div>

    <div class="login-btn-box">
      <a href="javascript:;" class="login-btn" @click="login">
        <span>{{ $t('m.login') }}</span>
      </a>
    </div>

    <div class="msg-login-box">
      <router-link class="msg-login-btn" @click.native="logMode = !logMode" to="/login">
        {{ logMode ? $t('m.OTP') : $t('m.password') }}</router-link>
    </div>
  </div>
</template>

<script>
// import { MazPhoneNumberInput } from 'maz-ui'
export default {
  // components: { MazPhoneNumberInput },
  name: 'LogPage',
  data() {
    return {
      phoneNumber: null,
      results: null,
      exampleText: '请输入电话号码',
      // 电话 Number
      tel: '',
      // 电话真假
      isValid: false,
      isError: false,
      // 区号+号码+国家
      telDetail: '',
      telCode: '',
      // 密码 及 验证码
      password: '',
      smsCode: '',
      countDown: 60,
      // 动态验证码
      OPTStr: '',
      OPTtemp: '',
      sendOTPText: '',
      sendState: true,
      // 密码、验证码登录模式切换
      logMode: false,
      // 显示隐藏密码切换
      pwShowState: 'password',
      // 眼睛按钮切换
      eyesClassName: 'iconfont icon-closeEyes'
    }
  },
  watch: {
    results(num) {
      this.tel = ''
      this.isValid = num.isValid
      this.isError = !num.isValid
      if (this.phoneNumber === null) {
        this.isError = false
        this.exampleText = '请输入电话号码'
      }
      if (this.isValid === true) {
        this.exampleText = '示例 : 131 2345 6789'
      }
      if (num.nationalNumber !== undefined) {
        this.tel = num.nationalNumber
        this.telDetail = num.formattedNumber + num.countryCode
        this.telCode = num.countryCode
        this.$store.commit('getInputTel', this.telDetail)
      }
    }
  },
  methods: {
    // 显示隐藏密码方法
    showPW(e) {
      this.pwShowState = this.pwShowState === 'password' ? 'text' : 'password'
      this.eyesClassName = this.eyesClassName === 'iconfont icon-closeEyes' ? 'iconfont icon-openEyes' : 'iconfont icon-closeEyes'
    },
    // 登陆账户规则
    login() {
      var telState = localStorage.getItem(this.telDetail)

      if (this.tel.length === 0) {
        this.$notify(this.$t('m.warn.enterTel')) // 请输入手机号
      } else if (this.tel.length !== 11 && this.telCode === 'CN' && this.isValid === true) {
        this.$notify({ type: 'warning', message: '请输入 11 位手机号' }) //  CN区提示 11 位手机号
      } else if (telState === null && this.isValid === true) {
        this.$notify({ type: 'primary', message: this.$t('m.warn.unfindTel') }) // 未找到此用户
      } else if (this.tel.length !== 0 && this.isValid === false) {
        this.$notify({ type: 'warning', message: this.$t('m.warn.errTel') }) // 电话号码无效
      } else if (this.password.length === 0 && this.logMode) {
        this.$notify(this.$t('m.PWinputInfo')) // 请输入密码
      } else if (this.password !== telState && this.logMode) {
        this.$notify(this.$t('m.warn.errPW')) // 密码错误
        this.password = ''
      } else if (this.logMode) {
        this.$toast.success(this.$t('m.warn.loginSuc')) // 登陆成功
        this.$router.push('/home')
      } else if (this.smsCode.length === 0) {
        this.$notify(this.$t('m.OTPinputInfo')) // 请输入验证码
      } else if (this.smsCode !== this.OPTStr) {
        this.$notify(this.$t('m.warn.errOTP')) // 验证码无效
        this.smsCode = ''
      } else if (!this.logMode) {
        this.$toast.success(this.$t('m.warn.loginSuc')) // 登陆成功
        this.$router.push('/home')
        localStorage.setItem(this.telDetail, this.OPTtemp)
        this.OPTStr = ''
      }
    },
    // 验证码规则
    sendOTP() {
      var telState = localStorage.getItem(this.telDetail)

      if (this.tel.length === 0) {
        this.$notify(this.$t('m.warn.enterTel'))
      } else if (this.tel.length !== 11 && this.telCode === 'CN' && this.isValid === true) {
        this.$notify({ type: 'warning', message: '请输入 11 位手机号' }) //  CN区提示 11 位手机号
      } else if (telState === null && this.isValid === true) {
        this.$notify({ type: 'primary', message: this.$t('m.warn.unfindTel') }) // 未找到用户
      } else if (this.tel.length !== 0 && this.isValid === false) {
        this.$notify({ type: 'warning', message: this.$t('m.warn.errTel') }) // 电话无效
      } else if (this.countDown === 60) {
        this.$toast.success(this.$t('m.warn.OTPsuc')) // 发送成功
        // 生成动态验证码
        for (let i = 0; i < 6; i++) {
          this.OPTStr += Math.round(Math.random() * (9 - 0) + 0)
        }
        setTimeout(() => {
          this.$dialog
            .alert({
              title: this.$t('m.warn.OTPname'), // 验证码
              message: this.OPTStr
            })
            .then(() => {
              // on close
            })
          this.OPTtemp = telState
          localStorage.setItem(this.telDetail, this.OPTStr)
        }, 6000)
        const timer = setInterval(() => {
          this.countDown--
          this.sendOTPText = this.countDown + this.$t('m.sentOTP') // s重新发送
          this.sendState = false
          if (this.countDown === 0) {
            clearInterval(timer)
            this.countDown = 60
            this.sendState = true
            localStorage.setItem(this.telDetail, this.OPTtemp)
            this.OPTStr = ''
          }
        }, 1000)
      }
    }
  }
}
</script>

<style lang="less">
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 93%;
  height: 100%;
  .login-text {
    color: #545454;
    font-weight: normal;
  }
  .login-text,
  .tel-box,
  .pw-box,
  .login-btn-box,
  .msg-login-box {
    display: flex;
    align-items: center;
    height: 60px;
    margin: 1px;
    .msg-login-btn {
      position: absolute;
      left: 30px;
      color: #545454;
    }
    .vue-phone-number-input {
      width: 100%;
      .input-tel__label,
      .country-selector__label {
        position: absolute;
        top: 0;
      }
      .country-selector__input[data-v-46e105de],
      .input-tel__input[data-v-e59be3b4] {
        border: 0.09em solid #828282;
        width: 100%;
        height: 48px;
        top: 50%;
        transform: translateY(-50%);
      }
      .input-tel__input[data-v-e59be3b4] {
        border-left: none;
      }
      .country-selector__list[data-v-46e105de] {
        top: 48px;
      }
    }
  }
}
.sms-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72%;
  border: 0.08em solid #828282;
  border-radius: 6px;
  #sms-input {
    width: 90%;
    height: 100%;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-family: Arial;
    letter-spacing: 1.5px;
    text-indent: 12px;
    color: #696969;
  }
  a {
    margin-right: 6px;
    font-size: 15px;
    color: #ffb314;
    letter-spacing: 0;
    white-space: nowrap;
  }
}
.pw-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 72%;
  border: 0.09em solid #828282;
  border-radius: 6px;
  #pw-input {
    width: 90%;
    height: 100%;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-family: Arial;
    letter-spacing: 1.5px;
    text-indent: 12px;
    color: #696969;
  }
  .icon-closeEyes:before {
    content: '\e8c7';
    font-size: 1.8em;
    color: #faa900;
    margin: 6px;
  }
  .icon-openEyes:before {
    content: '\e8bf';
    font-size: 1.8em;
    color: #faa900;
    margin: 6px;
  }
}
.login-btn-box {
  .login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
    background: #faa900;
    border-radius: 6px;
  }
  .login-btn span {
    color: white;
    font-size: 1.2em;
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::-webkit-input-placeholder {
  color: #c9c9c9;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0;
}
</style>
